﻿
<html>

<head>
<title>24th August 2010 (Introductory Course)</title>


<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
	
<script type="text/javascript" src="jquery-1.3.2.js"></script>

<script type="text/javascript" src="trace.js"></script>

<script type="text/javascript" src="dataStructure.js"></script>
<script type="text/javascript" src="orienteering.js"></script>

<script type="text/javascript" src="control.js"></script>
	
<script type="text/javascript" src="canvas.js"></script>


<script type="text/javascript">


	
function exportAsPNG(event)
{
    var element = document.getElementById('canvas1');
    var strData = element.toDataURL("image/png");
	window.open(strData);
}

function loadData(event)
{
    deleteAll();
    decodeData($('#data').val());
    reset();
    
    markAllPointsAsNeedingRender();
    render();
}


function zoomAndPrint(event)
{
    zoomIn();
    window.print();
}

        
function zoomIn(event)
{
        $('#canvas1').height(HEIGHT);
        $('#canvas1').width(WIDTH);
}        
function zoomOut(event)
{
        var fraction = 300 / HEIGHT;
        $('#canvas1').height(300);
        $('#canvas1').width(fraction * WIDTH);
}


function loadBackgroundImage(event)
{
    var v = $('#imageLocation').val();  
    
    var img = new Image();  
    img.onload = function()
    {  
		canvasSetSize(img.width, img.height)
		
		canvasSetBackgroundImage(img);
		
        zoomOut();
		
        markAllPointsAsNeedingRender();
        render();
    }  
    img.src = v;
	
	trace("loadBackgroundImage from "+v);
    
}

// function setLineScale(event)
// {
//      
//     var v = parseFloat($('#lineScale').val()); 
//     
//         markAllPointsAsNeedingRender();
//         POINTRADIUS = 30 * v;
//         LINEWIDTH = 6 * v;
//         render();
//         
//  trace("setLineScale to "+v);
//     
// }


function setDrawingOperation(event)
{
    var value = $('input[name=group1]:checked').val() 
    
    setFunction(value);
}


	function main(event) {
				
		if (controlInitialise())
		{
				
			        trace("finished controlInitialise");
			if (canvasInitialise('canvas1'))
			{
			        trace("finished canvasInitialise");
			
			        setTargetForRender(C2D)
                    setDataCallback(function(s)
                    {
                        $('#data').val(s)
                    })
                    setResetCallback(function()
                    {
		                calculateSiteStylesAndIndexes(true)
                    })
                    
			        loadBackgroundImage();
			       // setLineScale();
			        setDrawingOperation();
			        loadData();
			        
			        //relaxC();
			        
			        
    				$('#error').hide();
			}
		}
		
	}

		
</script>


</head>



<!--http://www.attackpoint.org/discussionthread.jsp/message_4488-->
<!--[if IE]><script type="text/javascript"
src="/path/to/excanvas.js"></script><![endif]-->


<body onload="main(event)" onkeydown="keyFunctionChosen(event)">
	
	    
<div class="noprint">
	Introductory course held on Aug 25th 2010.
</div>
	
	
<div class="noprint">
	<p id="error">
	Route Designer requires JavaScript and HTML Canvas provided by recent versions of <a href="http://www.apple.com/safari/">Safari</a>, <a href="http://www.mozilla.com/firefox/">Firefox</a>, <a href="http://www.google.com/chrome">Chrome</a> or <a href="http://www.opera.com/index.dml">Opera</a></p>
</div>


<canvas id="canvas1" onmousedown="controlMouseDown(event)" onmousemove="controlMouseMove(event)" onmouseup="controlMouseUp(event)">
</canvas>

<div class="noprint">
<input type="button" onclick="zoomIn(event)" value="Zoom In"/>
<input type="button" onclick="zoomOut(event)" value="Zoom Out"/>
<input type="button" onclick="zoomAndPrint(event)" value="Print"/>
<input type="button" onclick="exportAsPNG(event)" value="Export PNG"/><br>
</div>


<div class="noprint">
<br>
<label>Map Image:<input type="text" id="imageLocation" value="QE.gif"/></label><br>
<label>Diagram data:<input type="text" id="data" value="e[125]=new Object();e[125].type='VectorObject';e[125].v0='751';e[125].v1='1219';e[126]=new Object();e[126].type='Point';e[126].v0='125';e[127]=new Object();e[127].type='StringObject';e[127].v0='';e[128]=new Object();e[128].type='Text';e[128].v0='127';e[128].v1='126';e[129]=new Object();e[129].type='Site';e[129].v0='128';e[132]=new Object();e[132].type='StringObject';e[132].v0='1';e[133]=new Object();e[133].type='Text';e[133].v0='132';e[133].v1='196';e[134]=new Object();e[134].type='Site';e[134].v0='133';e[135]=new Object();e[135].type='VectorObject';e[135].v0='505';e[135].v1='871';e[136]=new Object();e[136].type='Point';e[136].v0='135';e[137]=new Object();e[137].type='StringObject';e[137].v0='2';e[138]=new Object();e[138].type='Text';e[138].v0='137';e[138].v1='136';e[139]=new Object();e[139].type='Site';e[139].v0='138';e[140]=new Object();e[140].type='VectorObject';e[140].v0='670';e[140].v1='791';e[141]=new Object();e[141].type='Point';e[141].v0='140';e[142]=new Object();e[142].type='StringObject';e[142].v0='3';e[143]=new Object();e[143].type='Text';e[143].v0='142';e[143].v1='141';e[144]=new Object();e[144].type='Site';e[144].v0='143';e[145]=new Object();e[145].type='VectorObject';e[145].v0='1024';e[145].v1='752';e[146]=new Object();e[146].type='Point';e[146].v0='145';e[147]=new Object();e[147].type='StringObject';e[147].v0='4';e[148]=new Object();e[148].type='Text';e[148].v0='147';e[148].v1='146';e[149]=new Object();e[149].type='Site';e[149].v0='148';e[150]=new Object();e[150].type='VectorObject';e[150].v0='1256';e[150].v1='666';e[151]=new Object();e[151].type='Point';e[151].v0='150';e[152]=new Object();e[152].type='StringObject';e[152].v0='5';e[153]=new Object();e[153].type='Text';e[153].v0='152';e[153].v1='151';e[154]=new Object();e[154].type='Site';e[154].v0='153';e[155]=new Object();e[155].type='VectorObject';e[155].v0='734';e[155].v1='400';e[156]=new Object();e[156].type='Point';e[156].v0='155';e[157]=new Object();e[157].type='StringObject';e[157].v0='6';e[158]=new Object();e[158].type='Text';e[158].v0='157';e[158].v1='156';e[159]=new Object();e[159].type='Site';e[159].v0='158';e[160]=new Object();e[160].type='VectorObject';e[160].v0='938';e[160].v1='328';e[161]=new Object();e[161].type='Point';e[161].v0='160';e[162]=new Object();e[162].type='StringObject';e[162].v0='7';e[163]=new Object();e[163].type='Text';e[163].v0='162';e[163].v1='161';e[164]=new Object();e[164].type='Site';e[164].v0='163';e[165]=new Object();e[165].type='VectorObject';e[165].v0='1480';e[165].v1='544';e[166]=new Object();e[166].type='Point';e[166].v0='165';e[167]=new Object();e[167].type='StringObject';e[167].v0='8';e[168]=new Object();e[168].type='Text';e[168].v0='167';e[168].v1='166';e[169]=new Object();e[169].type='Site';e[169].v0='168';e[170]=new Object();e[170].type='VectorObject';e[170].v0='1507';e[170].v1='715';e[171]=new Object();e[171].type='Point';e[171].v0='170';e[172]=new Object();e[172].type='StringObject';e[172].v0='9';e[173]=new Object();e[173].type='Text';e[173].v0='172';e[173].v1='171';e[174]=new Object();e[174].type='Site';e[174].v0='173';e[175]=new Object();e[175].type='VectorObject';e[175].v0='1872';e[175].v1='963';e[176]=new Object();e[176].type='Point';e[176].v0='175';e[177]=new Object();e[177].type='StringObject';e[177].v0='10';e[178]=new Object();e[178].type='Text';e[178].v0='177';e[178].v1='176';e[179]=new Object();e[179].type='Site';e[179].v0='178';e[180]=new Object();e[180].type='VectorObject';e[180].v0='1305';e[180].v1='1345';e[181]=new Object();e[181].type='Point';e[181].v0='180';e[182]=new Object();e[182].type='StringObject';e[182].v0='11';e[183]=new Object();e[183].type='Text';e[183].v0='182';e[183].v1='181';e[184]=new Object();e[184].type='Site';e[184].v0='183';e[187]=new Object();e[187].type='StringObject';e[187].v0='12';e[188]=new Object();e[188].type='Text';e[188].v0='187';e[188].v1='229';e[189]=new Object();e[189].type='Site';e[189].v0='188';e[190]=new Object();e[190].type='VectorObject';e[190].v0='792';e[190].v1='1192';e[191]=new Object();e[191].type='Point';e[191].v0='190';e[192]=new Object();e[192].type='StringObject';e[192].v0='';e[193]=new Object();e[193].type='Text';e[193].v0='192';e[193].v1='191';e[194]=new Object();e[194].type='Site';e[194].v0='193';e[195]=new Object();e[195].type='VectorObject';e[195].v0='471';e[195].v1='1079';e[196]=new Object();e[196].type='Point';e[196].v0='195';e[197]=new Object();e[197].type='Line';e[197].v0='126';e[197].v1='196';e[200]=new Object();e[200].type='Line';e[200].v0='196';e[200].v1='136';e[203]=new Object();e[203].type='Line';e[203].v0='136';e[203].v1='141';e[206]=new Object();e[206].type='Line';e[206].v0='141';e[206].v1='146';e[209]=new Object();e[209].type='Line';e[209].v0='146';e[209].v1='151';e[212]=new Object();e[212].type='Line';e[212].v0='151';e[212].v1='156';e[215]=new Object();e[215].type='Line';e[215].v0='156';e[215].v1='161';e[218]=new Object();e[218].type='Line';e[218].v0='161';e[218].v1='166';e[221]=new Object();e[221].type='Line';e[221].v0='166';e[221].v1='171';e[224]=new Object();e[224].type='Line';e[224].v0='171';e[224].v1='176';e[227]=new Object();e[227].type='Line';e[227].v0='176';e[227].v1='181';e[228]=new Object();e[228].type='VectorObject';e[228].v0='822';e[228].v1='1366';e[229]=new Object();e[229].type='Point';e[229].v0='228';e[230]=new Object();e[230].type='Line';e[230].v0='181';e[230].v1='229';e[233]=new Object();e[233].type='Line';e[233].v0='229';e[233].v1='191';"/></label><br>

</div>


<div class="noprint">
	<div id="trace"></div>
</div>


</body>

</html>